.myarticlesBody{ position: relative; min-height: 100%;}
.myarticlesBody .writing_nav{ position: fixed; left: 94px; bottom: 0; width: 180px; background: #f3f6fe; height: calc(100vh - 62px); box-shadow: 4px 6px 29px rgba(0,0,0,.06); z-index: 1;}
.myarticlesBody .writing_nav .writing_nav_con{  padding: 13px; padding-top: 100px;}
.myarticlesBody .writing_nav .writing_nav_list{ font-size: 15px; color: #474b5a; display: flex; align-items: center; border-radius: 6px; height: 40px; padding-left: 30px; margin-bottom: 15px; cursor: pointer;}
.myarticlesBody .writing_nav .writing_nav_list:last-child{ margin-bottom: 0;}
.myarticlesBody .writing_nav .writing_nav_list::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 100%; background: #f3f6fe; margin-right: 14px;}
.myarticlesBody .writing_nav .writing_nav_list.active{ color: #3662eb; background: #e8eeff;}
.myarticlesBody .writing_nav .writing_nav_list.active::before{ background: #3662eb;}
.myarticlesBody .writing_nav .writing_nav_list:hover{ color: #3662eb; background: #e8eeff;}
.myarticlesBody .writing_nav .writing_nav_list:hover::before{ background: #3662eb;}
.myarticlesBody .writing .writing_right{ padding-left: 180px; height: calc(100vh - 210px); position: relative;}

.myarticlesBody .TitleList{ padding: 20px; padding-right: 0;}
.myarticlesBody .TitleList .TitleList_padding{ background: #f1f5fe; position: fixed; right: 30px; top: 62px; width: calc(100% - 324px); padding: 20px 0px; padding-bottom: 12px; z-index: 1;}
.myarticlesBody .TitleList .TitleList_top{ background: #fff; border-radius: 4px; padding: 28px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_title{ font-size: 18px; color: #22242c; font-weight: bolder; display: flex; align-items: center; margin-bottom: 20px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_title span{ display: flex; align-items: center; flex-direction: column; justify-content: center; margin-right: 11px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_title span::before{ content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 100%; background: #3662eb; margin-bottom: 3px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_title span::after{ content: ""; display: inline-block; width: 4px; height: 14px; border-radius: 100px; background: #3662eb; margin-bottom: 3px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd{ display: flex; align-items: center;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list{ display: flex; align-items: center; font-size: 13px; color: #abaeb6; height: 38px; border-radius: 4px; border: 1px solid #dcdee6; padding: 0px 13px; margin-right: 11px; cursor: pointer;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list:last-child{ margin-right: 0;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list span{ display: flex; align-items: center; justify-content: center; position: relative; margin-right: 5px; margin-left: 0;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list span img{ height: 16px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list span img:last-child{ position: absolute; left: 0; top: 0; opacity: 0;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list:nth-child(3) span img{ height: 12px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list:nth-child(4) span img{ height: 12px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list.active{ border: 1px solid #3662eb; background: #3662eb; color: #fff;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list.active span img{opacity: 0;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list.active span img:last-child{opacity: 1;}
.keyframes img{animation:mymove 1.5s infinite;}

@keyframes mymove {
  from {
      transform: rotate(0deg);
      transition: all 0.5s ease;
  }
  to {
      transform: rotate(180deg);
      transition: all 0.5s ease;
  }
}

.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt{ display: flex; align-items: center;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list{ display: flex; align-items: center; margin-right: 30px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list:last-child{ margin-right: 0;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .dt_list_left{ font-size: 13px; color: #474b5a; margin-right: 9px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .el-select{ width: 130px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .dt_list_icon{ margin-left: 13px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .dt_list_icon img{ height: 16px; cursor: pointer;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search{ display: flex; align-items: center; border-radius: 4px; overflow: hidden;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left{ border: 1px solid #dcdee6; border-radius: 4px 0px 0px 4px; border-right: 0; padding-left: 11px; display: flex; align-items: center;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left span{ margin-right: 10px;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left span i{ font-size: 16px; color: #5c6171;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left input{ border: 0px; line-height: 38px; padding: 0; padding-right: 11px; font-size: 13px; color: #222;}
.myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_right{ width: 56px; height: 40px; display: flex; align-items: center; justify-content: center; background: #3662eb; font-size: 13px; color: #fff; cursor: pointer;}

input::placeholder {
  color: #abaeb6; font-weight: normal;
}


.myarticlesBody .myarticles{ background: #fff; border-radius: 4px; padding: 28px 0px; margin-top: 152px; padding-top: 38px;}


@media screen and (max-width:1550px){
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list{ padding: 0px 5px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list{ margin-right: 20px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .el-select{ width: 100px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left input{ width: 75px;}
}


@media screen and (max-width:1336px){
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list .el-select{ width: 80px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_search .dt_search_left input{ width: 50px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dd .txt_dd_list{ font-size: 12px; margin-right: 8px;}
  .myarticlesBody .TitleList .TitleList_top .TitleList_top_txt .top_txt_dt .txt_dt_list{ margin-right: 10px;}
}















